import { useState, useEffect } from "react"
import { useLocation, useParams, useNavigate, useHref, useSearchParams } from "react-router-dom"
import { Button, Menu } from "antd"

import { useGetParams } from "../../utils"

function Demo4() {
    const $router = useNavigate() // 获取路由跳转方法

    // 获取当前路由参数
    // pathname是路由地址 query传参时返回 /home           params传参时返回 /home/123/abc
    // search是路由参数   query传参时返回 ?id=1&name=2    params传参时返回 ''
    // const { pathname, search, state, hash } = useLocation()
    const params = useLocation()

    //  query传参时返回''   params传参时返回 { id: 1, name: 2 }
    // const p1 = useParams()

    //  query传参时返回 #/home           params传参时返回 #/home/123/abc
    // const p3 = useHref()

    // 自定义hook，从useLocation获取query/state/params参数   避免每次拿参数都要去截取pathname
    // {path:'abc', query:{}, params:{}, state:{}}
    console.log(useGetParams(params))
    return (
        <div className="main_box">
            <h1>本案例展示 react路由的获取参数</h1>
        </div>
    )
}

export default Demo4
